import { Fragment } from '@/components/Fragment'; 
import { Flex, Text, Button, View, Alert, Fieldset, Link } from '@aws-amplify/ui-react';
import { FieldsetDemo } from './demo';
import { Example, ExampleCode } from '@/components/Example';
import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay';
import ThemeExample from '@/components/ThemeExample.mdx';
import { 
  BasicFieldset, 
  FieldsetSizes, 
  FieldsetVariations, 
  FieldsetDirection,
  DisabledFieldset,
  NameAttribute,
  FieldsetThemeExample,
  FieldsetStylePropsExample
} from './examples';

## Demo

<FieldsetDemo />

## Usage
<Example>
  <View>
    <BasicFieldset />
  </View>
  
  <ExampleCode>

```jsx file=./examples/BasicFieldset.tsx

```

  </ExampleCode>
</Example>

### Sizes
Fieldset size can be changed via the `size` prop. It affects the Fieldset's padding and gap size and the font size of its `legend` element.
<Example>
  <View>
    <FieldsetSizes />
  </View>
  
  <ExampleCode>

```jsx file=./examples/FieldsetSizes.tsx

```

  </ExampleCode>
</Example>

### Variation
Fieldset by default uses the `plain` variation which has no border or padding. Use the `outlined` variation to add a border and padding.
<Example>
  <View>
    <FieldsetVariations />
  </View>
  
  <ExampleCode>

```jsx file=./examples/FieldsetVariations.tsx

```

  </ExampleCode>
</Example>

### Direction
Fieldset uses the [Flex](flex) primitive for layout which allows you to use Flex props to control the direction and alignment of the Fieldset. Use `direction="row|row-reverse|column|column-reverse"` to change the direction of the Fieldset.
<Example>
  <View>
    <FieldsetDirection />
  </View>
  
  <ExampleCode>

```jsx file=./examples/FieldsetDirection.tsx

```

  </ExampleCode>
</Example>

### Disabled
Fieldset can be disabled by using `isDisabled={true}` prop which will apply the `[disabled]` attribute to the fieldset. Fieldset has no special disabled styles.
<Alert role="none" variation="warning" heading="Note about disabled fieldsets:">
  Disabled fieldsets in HTML will disable all inputs nested within them; even those nested within fieldsets that are not disabled. This is default browser behavior that the Fieldset primitive supports.
</Alert>

<Example>
  <View>
    <DisabledFieldset />
  </View>
  
  <ExampleCode>

```jsx file=./examples/DisabledFieldset.tsx

```

  </ExampleCode>
</Example>

### Name attribute
Fieldset supports the [name] attribute. Use the `name` prop to supply a name for your Fieldset. This can be useful if parsing form controls <Link href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/elements" isExternal>using the form.elements api</Link>
<Example>
  <View>
    <NameAttribute />
  </View>
  
  <ExampleCode>

```jsx file=./examples/NameAttribute.tsx

```

  </ExampleCode>
</Example>

## Styling

<ThemeExample component="Fieldset">
  <Example>
    <FieldsetThemeExample />
    
    <ExampleCode>

    ```tsx file=./examples/FieldsetThemeExample.tsx

    ```

    </ExampleCode>
  </Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Fieldset" />

### Global Styling

To override styling on all Fieldsets, you can set the Amplify CSS variables or use the [target classes](#target-classes).

<Example>
  <View>
    <Fieldset legend="A fieldset with a larger border radius" borderRadius="12px">A Fieldset styled with CSS.</Fieldset>
  </View>
  
  <ExampleCode>

```css
/* styles.css */
:root {
  --amplify-components-fieldset-border-radius: 12px;
}
/* OR */
.amplify-fieldset {
  border-radius: 12px;
}
```

  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Fieldset, you can use (in order of increasing specificity): a class selector or style props.

#### Using a class selector

<Example>
  <Fieldset className="purple-fieldset" legend="A purple fieldset">
    This is a purple fieldset
  </Fieldset>
  <ExampleCode>

```css
/* styles.css */
.purple-fieldset {
  background-color: var(--amplify-colors-purple-10);
  border-color: var(--amplify-colors-purple-60);
}
```

  </ExampleCode>
  <ExampleCode>

```jsx
import './styles.css';

<Fieldset className="purple-fieldset" legend="A purple fieldset">
  This is a purple fieldset
</Fieldset>
```

  </ExampleCode>
</Example>

#### Using style props

<Example>
  <FieldsetStylePropsExample />
  
  <ExampleCode>

```jsx file=./examples/FieldsetStylePropsExample.tsx

```

  </ExampleCode>
</Example>

## Accessibility

ARIA attributes, roles, and other HTML attributes that are passed to Fieldset are passed to the parent DOM element which is a `<fieldset>`.

### Legend
Fieldset outputs a `<legend>` as the first nested element within the Fieldset. The `<legend>` element does not currently behave well as a flexbox child in browsers. To allow Fieldset to still operate well as a flex parent, Fieldset duplicates the contents of the `legend` prop: 

- the first is output as a <a href="/react/components/visuallyhidden">VisuallyHidden</a> `<legend>` which is accessible to screen readers. 
- The second is output as a visible `<div>` element set to `aria-hidden={true}` so that the content is not repeated for screenreaders.

This enables Fieldset to have a legend as the suggested way to accessibly label a fieldset.
